<template>
	<view class="container">
		<navSearchBar title="联系人详情"></navSearchBar>
		<view class="tab">
			<tn-tabs :list="list" :isScroll="false" height="90" :current="current" name="name" 
			activeColor="#3B54DA" inactiveColor="#6F6F6F" :bold="true" @change="tabChange" :barHeight="2" :barWidth="48"></tn-tabs>
		</view>
		<view class="content">
			<basic v-if="current == 0" :contactInfo="contact" :type="type"></basic>
			<record v-else-if="current == 1" :contactInfo="contact" :type="type"></record>
			<!-- <phone v-else-if="current == 2" :phone="contact.mobile"></phone>
			<status v-else-if="current == 3" ></status>
			<root v-else></root> -->
		</view>
		<view class="operate" >
			<button class="flex-row-center" @click="callPhone">
				<text class="tn-icon-tel"></text>
				<text>电话联系</text>
			</button>
			<button class="flex-row-center open-button" @click="handdleAuth(1)" v-if="contact.access_authority.value==2">
				<text class="tn-icon-eye"></text>
				<text>开通权限</text>
			</button>
			<button class="flex-row-center close-button" @click="handdleAuth(2)" v-else>
				<text class="tn-eye-hide"></text>
				<text>关闭权限</text>
			</button>
			<button class="flex-row-center" @click="changeStatus" v-if="contact.access_authority.value==2">
				<text class="tn-icon-tip"></text>
				<text>修改状态</text>
			</button>
		</view>
		<tn-action-sheet safeAreaInsetBottom :list="actionSheetList" v-model="show" @click="actionSheetCallback" ></tn-action-sheet>
		<tn-modal v-model="dialogShow" :custom="true" :width="auto">
			 <view class="modal-style">
				 <image :src="qrcodeImg" show-menu-by-longpress mode=""></image>
				 <text class="text-tips-bold">请长按二维码转发给客户</text>
				 <text class="text-tips">注：二维码有效期为5分钟</text>
			 </view>
		</tn-modal>
		
		<tn-modal v-model="confirmShow" title="关闭权限" :content="content" :button="button" showCloseBtn @click="authModalClick"></tn-modal>
	</view>
</template>

<script>
	import basic from "./components/basic.vue"
	import record from "./components/record.vue"
	// import phone from "./components/phone.vue"
	// import root from "./components/root.vue"
	// import status from "./components/status.vue"
	export default {
		components:{
			basic,record,
			// phone,root,status
		},
		data() {
			return {
				content:'您确定要关闭该联系人的小程序权限吗？',
				 button: [{
					text: '我在想想',
					backgroundColor: '#CACACA',
					fontColor: '#000000',
					fontSize:'24',
					plain: true,
					shape: ''
				  },
				  {
					text: '确定关闭',
					backgroundColor: '#FFA457',
					fontColor: '#FFFFFF',
					fontSize:'32',
					shape: ''
				  }
				],
				confirmShow:false,
				dialogShow:false,
				qrcodeImg:'',
				show:false,
				actionSheetList:[{text:'设为失效联系人',value:2},{text:'设为有效联系人',value:1}],
				id: "",
				contact: {},
				list: [{
					name: '基本信息'
				}, 
				{
					name: '访问记录'
				},
				// {
				// 	name: '电话联系',
				// }, {
				// 	name: '修改状态',
				// }, {
				// 	name: '权限设置',
				// },
				],
				current: 0,
				type:1,
			};
		},
		onLoad() {
			this.id = this.$Route.query.id;
			this.type = this.$Route.query.type;
			console.log(this.id, "id")
			this.getDetail()
		},
		methods: {
			async getDetail() {
				uni.showLoading({
					title: '加载中'
				})
				let res;
				if(this.type == 2){
					res = await this.$api.myContactDetail(this.id)
				} else {
					res = await this.$api.contactDetail(this.id)
				}
				if (res.data.status == 200) {
					uni.hideLoading();
					this.contact = res.data.data;
					
					console.log(this.contact,"this.contact")
				}
			},
			tabChange(index) {
				this.current = index;
			},
			callPhone(){
				uni.makePhoneCall({
					phoneNumber:this.contact.mobile
				})
			},
			handdleAuth(type){
				if(type == 1){
					//开启
					this.getQrcode();
				} else{
					//关闭
					this.confirmShow = true;
				}
			},
			async authModalClick({index}){
				console.log('dddddd',index)
				this.confirmShow = false;
				if(index == 1){
					const data = {
						access_authority:2,//关闭权限
						id: this.contact.id
					}
					let res;
					if(this.type == 2){
						res = await this.$api.editMyContactRoot(data)
					} else {
						res = await this.$api.editContactRoot(data)
					}
					if(res.data.status == 200) {
						this.contact.access_authority.value = data.access_authority
					}
					
				}
			},
			getQrcode(){
				this.dialogShow = true;
				this.$tip.loading()
				this.$http.get('/api/member/business/contact/qrcode').then((res) => {
					this.$tip.loaded()
					if(res.data.status == 200) {
						this.qrcodeImg = res.data.data;
					}
				})
			},
			async actionSheetCallback(index){
				const data = {
					id: this.contact.id
				}
				data.status = this.actionSheetList[index].value;
				let res;
				if(this.type == 2){
					res = await this.$api.editMyContactStatus(data)
				} else {
					res = await this.$api.editContactStatus(data)
				}
				if(res.data.status == 200) {
					this.contact.status.value = data.status
				}
				
				
			},
			changeStatus(){
				let list = [{text:'设为失效联系人',value:2},{text:'设为有效联系人',value:1}];
				let index = list.findIndex((el) => this.contact.status.value == el.value)
				list.splice(index, 1);
				this.actionSheetList = list;
				this.show = true;
				console.log('dianji',this.actionSheetList)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.tab {
		padding: 10rpx 40rpx 0;
		height: 100rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #EFEFEF;
		/deep/.tn-tabs__bar {
			
			bottom:-1rpx;
		}
	}
	.content {
		flex: 1;
		height: 100%;
		overflow: hidden;
	}
	.operate {
		padding: 30rpx;
		display: flex;
		justify-content: space-around;
	
		button {
			flex:1;
			height: 72rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			color: #FFFFFF;
			padding:0 20rpx;
			&:first-of-type {
				background: #4A505E;
			}
	
			
			&:nth-of-type(3) {
				background: #FFA457;
			}
			text {
				&:last-child {
					font-size: 28rpx;
					font-weight: $Semibold;
					margin-left: 10rpx;
				}
			}
		}
		.open-button {
			background: #5DBC65;
		}
		.close-button{
			background: darkred;
		}
		button + button{
			margin-left: 30rpx;
		}
	
	}
	/deep/.tn-modal__box{
		padding:0!important;
	}
	.modal-style{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding:100rpx 100rpx 60rpx;
		image{
			width: 490rpx;
			height: 490rpx;
		}
		.text-tips-bold{
			font-size: 28rpx;
			color: #525252;
			font-weight: $Semibold;
			margin:60rpx 0 20rpx 0;
		}
		.text-tips{
			color:#FF2323
		}
	}
</style>